<template>
  <div class="login">
    <el-form
      v-loading="loading"
      element-loading-text="身份验证中"
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      label-position="left"
      label-width="0px"
      class="login-form"
    >
      <h3 class="title">页岩气公司物资管理系统</h3>
      <el-form-item prop="userAccount">
        <el-input
          v-model="loginForm.userAccount"
          type="text"
          auto-complete="off"
          placeholder="账号"
        >
          <!--          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />-->
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="onSubmit"
        >
          <!--          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />-->
        </el-input>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button
          :loading="loginLoading"
          size="medium"
          type="primary"
          style="width: 100%"
          @click.native.prevent="onSubmit"
        >
          <span v-if="!loginLoading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <!--<el-button :loading="loginLoading" size="medium" type="primary" style="width:49%;"-->
        <!--@click.native.prevent="ddLogin">-->
        <!--<span v-if="!loginLoading">钉钉登录</span>-->
        <!--<span v-else>登 录 中...</span>-->
        <!--</el-button>-->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import * as dd from "dingtalk-jsapi";
import { login, ddLogin, getDingDingConfig } from "@/api/user";
let $this = null;
export default {
  name: "loginIndex",
  data() {
    return {
      loginForm: {
        password: "",//admin
        userAccount: "",//admin
      },
      loginRules: {
        userAccount: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      checked: false,
      loginLoading: false,
      loading: false,
    };
  },
  created() {
    $this = this;
      $this.ddAutoLogin();
  },
  methods: {
    ddAutoLogin() {
      if (dd.env.platform !== "notInDingTalk") {
        getDingDingConfig().then((r) => {
          if (r.data.code != 200) {
            return $this.$message.error(r.data.message);
          }
          dd.ready(function () {
            dd.runtime.permission.requestAuthCode({
              corpId: r.data.data.corpId,
              onSuccess: function (info) {
                $this.loading = true;
                ddLogin(info.code)
                  .then((res) => {
                    $this.loading = false;
                    if (res.data.code != 200) {
                      return $this.$message.error(res.data.message);
                    }
                    $this.$message({
                      message: '登录成功',
                      type: 'success',
                      duration:1000
                    });
                    window.sessionStorage.clear();
                    window.sessionStorage.setItem("token", res.data.data);
                    $this.$router.push({
                      name: "layout",
                    });
                  })
                  .catch((err) => {
                    $this.loading = false;
                    $this.$message.error("登录失败");
                  });
              },
            });
          });
        });
      }
    },

    onSubmit() {
      $this.$refs.loginForm.validate((val) => {
        if (!val) {
          return $this.$message.error("请填写账号和密码");
        }
        $this.loginLoading = true;
        login($this.loginForm)
          .then((res) => {
            $this.loginLoading = false;
            if (res.data.code != 200) {
              return $this.$message.error(res.data.message);
            }
            $this.$message({
              message: '登录成功',
              type: 'success',
              duration:1000
            });
            // 路由字典中的name
            // $this.$router.push({name:'home'}
            window.sessionStorage.clear();
            window.sessionStorage.setItem("token", res.data.data);
            $this.$router.push({
              name: "layout",
            });
          })
          .catch((err) => {
            $this.loginLoading = false;
            $this.$message.error("登录失败");
          });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url(https://cn.bing.com/th?id=OHR.EvergladesShowers_ZH-CN9209435866_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp);
  background-size: cover;
}

.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 385px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  display: inline-block;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
</style>
